import BaseComponent from "../../app/baseComponent";

export const DISABLED_CLASSNAME = "disabled";

function addClass(el, className) {
    if (el.className.indexOf(className) < 0) {
        el.className = el.className + " " + className;
    }
}

export class AuiDatepicker extends BaseComponent {
    constructor(name) {
        super(name);
        this.props = {
            startDate: {
                type: Date
            },
            endDate: {
                type: Date
            },
            now: {
                type: Date,
                default: new Date()
            }
        };
        this.watch = {
            startDate: function(newval) {
                this.$refs.date.refresh();
            },
            endDate: function(newval) {
                this.$refs.date.refresh();
            }
        };
        this.methods = {        
            onDateActionYearClick(e) {
                var self = this;
                if (self.readyToShow) {
                    self.readyToShow = false;
                }
                if (!self.showYear) {    
                    self.showYear = true;                     
                }
            },
            onDateActionMonthClick(e) {
                var self = this;
                if (self.readyToShow) {
                    self.readyToShow = false;
                }
                if (self.showType != self.SHOW_MONTH) {
                    self.showType = self.SHOW_MONTH;
                    // setTimeout(function() {
                    //     self.bindMonthEvent();
                    // }, 0);
                }
            },             
            onDateRender(dates, now) {    
                var self = this;
                self.now = now;
                if (self.startDate && self.startDate.getFullYear) {
                    var startDateYear = self.startDate.getFullYear();
                    var startDateMonth = self.startDate.getMonth();
                    var startDateDay = self.startDate.getDate();

                    dates = dates.map(function (date) {
                        if (date.year < startDateYear) {
                            addClass(date, DISABLED_CLASSNAME);
                        } else if(date.year == startDateYear) {
                            if (date.month < startDateMonth) {
                                addClass(date, DISABLED_CLASSNAME);
                            } else if (date.month == startDateMonth) {
                                if (date.day < startDateDay) {
                                    addClass(date, DISABLED_CLASSNAME);
                                }
                            }
                        } 
                        date.className = date.className.trim();                    
                        return date;            
                    });  
                }      
                                
                if (self.endDate && self.endDate.getFullYear) {
                    var endDateYear = self.endDate.getFullYear();
                    var endDateMonth = self.endDate.getMonth();
                    var endDateDay = self.endDate.getDate();

                    dates = dates.map(function (date) {
                        if (date.year > endDateYear) {
                            addClass(date, DISABLED_CLASSNAME);
                        } else if(date.year == endDateYear) {
                            if (date.month > endDateMonth) {
                                addClass(date, DISABLED_CLASSNAME);
                            } else if (date.month == endDateMonth) {
                                if (date.day > endDateDay) {
                                    addClass(date, DISABLED_CLASSNAME);
                                }
                            }
                        } 
                        date.className = date.className.trim();                    
                        return date;            
                    });  
                } 

                return dates;
            },
            onMonthRender(months) {
                var self = this;            
                if (self.startDate && self.startDate.getFullYear) {
                    var startDateYear = self.startDate.getFullYear();
                    var startDateMonth = self.startDate.getMonth();    
                    months = months.map(function (month) {
                        if (month.year < startDateYear) {
                            addClass(month, DISABLED_CLASSNAME);   
                        } else if (month.year == startDateYear) {
                            if (month.month < startDateMonth) {
                                addClass(month, DISABLED_CLASSNAME);
                            }  
                        }
                        month.className = month.className.trim();
                        return month;            
                    });                               
                } 

                if (self.endDate && self.endDate.getFullYear) {
                    var endDateYear = self.endDate.getFullYear();
                    var endDateMonth = self.endDate.getMonth();    
                    months = months.map(function (month) {
                        if (month.year > endDateYear) {
                            addClass(month, DISABLED_CLASSNAME);   
                        } else if (month.year == endDateYear) {
                            if (month.month > endDateMonth) {
                                addClass(month, DISABLED_CLASSNAME);
                            }  
                        }
                        month.className = month.className.trim();
                        return month;            
                    });                               
                } 
                return months;
            },
            onYearRender(years) {
                var self = this;
                if (self.startDate && self.startDate.getFullYear) {
                    years = years.map(function (year) {
                        if (year.year < self.startDate.getFullYear()) {
                            addClass(year, DISABLED_CLASSNAME);
                        }
                        year.className = year.className.trim();
                        return year;
                    });
                }

                if (self.endDate && self.endDate.getFullYear) {
                    years = years.map(function (year) {
                        if (year.year > self.endDate.getFullYear()) {
                            addClass(year, DISABLED_CLASSNAME);
                        } 
                        year.className = year.className.trim();
                        return year;            
                    });                     
                }
                return years;
            },
            onMonthClick(e) {
                var self = this;
                if (e.target.className.indexOf(DISABLED_CLASSNAME) < 0) {
                    var year = parseFloat(e.target.getAttribute("data-year"));
                    var month = parseFloat(e.target.getAttribute("data-month"));

                    if (year && month > -1) {
                        self.now = new Date(year, month, self.now.getDate());
                        self.private_value = new Date(year, month, self.now.getDate());
                        self.showType = self.SHOW_NONE;
                        self.readyToShow = true;
                    } else {

                    }
                }
            },
            onActionYearClick(e) {
                e.stopPropagation();
                var self = this;
                if (!self.showYear) {    
                    self.showYear = true;

                    if (self.showType == self.SHOW_MONTH) {
                    }     
                }
            },
            onYearClick(e) {
                var self = this;
                if (e.target.className.indexOf(DISABLED_CLASSNAME) < 0) {
                    var year = parseFloat(e.target.getAttribute("data-year"));
                    self.showYear = false;
                    if (self.showType == self.SHOW_MONTH) {
                        self.$refs.month.render(year);
                    } else {
                        self.now = new Date(year, self.now.getMonth(), self.now.getDate());
                        self.private_value = new Date(year, self.now.getMonth(), self.now.getDate());
                        self.readyToShow = true;
                    }
                }
            },          
            onDateSelect(e) {
                var self = this;
                var date = new Date(
                    parseFloat(e.target.getAttribute("data-year")),
                    parseFloat(e.target.getAttribute("data-month")),
                    parseFloat(e.target.getAttribute("data-day")));
                e.private_date = date;
                self.$emit("dateselect", e);
            },
            reset() {
                var self = this;

                if (self.showYear) {
                    self.showYear = false;
                    if (self.showType == self.SHOW_MONTH) {
                        self.showType = self.SHOW_NONE;
                    }
                } else {
                    if (self.showType == self.SHOW_MONTH) {
                        self.showType = self.SHOW_NONE;
                    }
                }            
            }
        };      
        // this.beforeDestroy = function () {
        // }
    }
    _template() {
return `
<div class="aui-datepicker">
    <aui-date
    @dateselect="onDateSelect" 
    v-if="readyToShow" ref="date" :value="private_value" 
    @actionyearClick="onDateActionYearClick"
    @actionmonthClick="onDateActionMonthClick"
    :onRenderDates="onDateRender"></aui-date>  
    <aui-month v-if="showType == SHOW_MONTH" ref="month" 
    @yearselect="onActionYearClick" 
    @monthselect="onMonthClick" :now="private_value" :onRenderDates="onMonthRender"></aui-month> 
    <aui-year v-if="showYear" ref="year" 
    @yearselect="onYearClick" :now="private_value" :onRenderDates="onYearRender"></aui-year>     
</div>
`        
    }
    _mounted() {                
        var self = this;            
        self.currentYear = self.now.getFullYear();
        self.private_value = self.now;
        self.readyToShow = true;
    }    
    _data() {
        var ret = {};    
        ret.readyToShow = false;
        ret.showYear = false;
        ret.SHOW_NONE = -1;        
        ret.SHOW_YEAR = 0;
        ret.SHOW_MONTH = 1;
        ret.showType = ret.SHOW_NONE;
        ret.dateRefs = {};      
        ret.currentYear = 0;
        ret.gatorMonth = {};
        ret.gatorYear = {};
        ret.private_value = {};
        return ret;        
    }      
}

AuiDatepicker.install = function() {
    window.AUICustomComponents.define("aui-datepicker", AuiDatepicker);
};

